<template>
   <view class="u-input">
    <input type="text" class="input-warpper"   :placeholder='placeholder'  :value='value'  @change="change" />
    <view class="u-text"  v-if="type == 0 " > {{ tail }}  </view>
    <view class="u-text" v-if="type == -1 "> 元-m<sup>2</sup>-月 </view>
    <view class="u-text"  v-if="type == -2 "> m<sup>2</sup></view>
  </view>
</template>
<script>  
import Taro, { useReady,getCurrentInstance} from '@tarojs/taro' 
export default { 
 props:{ 
     wename:{
       type:String
     },
     tail:{
      type:String
     },  
     placeholder:{
      type:String
     },  
     val:{
      type:String
     },  
     target:{ /* 全局状态值需要看改变的是哪一层 */
      type:String,
      value:'tmp',
    },
     decimal:{
       type:Number,
       value:2,
     }
  }, 
 data() {
    return {
      value:'',
      type:1,
    }
  },
  mounted(){ 
        var type = 0; 
        if(this.tail =='元-m-月') type=-1;
        if(this.tail =='m') type=-2;
        this.type = type
  },
  methods:{
      change(e){
        console.log("改变",e);
        let value = e.detail.value.replace(/\D/g, '')
        if(value=='') value = 0;
        this.value  = parseFloat(value).toFixed(this.decimal) 
        var obj = {};obj[this.wename] = this.value
        var tmp = this.$store.state[this.target];
        console.log("旧的数据",tmp);
        tmp = Object.assign(obj,tmp[this.target])  
        this.$store.dispatch(this.target, tmp );
      }
  }
}
</script>  
<style>
.u-input {
  background: #fbd100;
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-right: 10px;
  font-size: 12PX;
}
.input-warpper {
  background: #fff; 
  border-radius: 10px 0 0 10px;
  padding: 5px;
  text-align: center;
  
}
.u-text {
  color: #fff;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
sup{
  top: -3px;
  position: relative;
  font-size: 12px;
}
</style>